<template>
    <div class="mainContent">
        <div v-for="(item, index) of contentList" :key="index" style="width:343px;height:197px;border:1px rgb(240, 240, 240) solid; box-sizing: border-box;font-size:15px">
            <div class="upList">
                <div>{{item.title}}</div>
                <el-button type="primary" v-if="item.isButton" size="mini" @click="openClick">查看</el-button>
            </div>
            <div class="middleList">
                <div v-for="(items, indexs) of item.children" :key="indexs" class="underList">
                    <div>{{items.title}}</div>
                    <div>{{thmensList[items.type]}}<span v-if="items.num">/{{thmensList[items.num]}}</span></div>
                </div>
            </div>
        </div>

        <!-- 侧拉框 -->
        <div>
            <el-drawer
                title="我是标题"
                size='600px'
                :visible.sync="drawer"
                :with-header="false">
                <div style="padding: 10px">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="新增" name="first">
                            <el-table :data="thmensList.newData" border style="width: 100%;"  height="500px"  >
                                <el-table-column  label="头像">
                                       <template slot-scope="scope">
                                           <img :src="scope.row.avatar" alt="">
                                         <!-- <span style="margin-left: 10px">{{ scope.row.avatar}}</span> -->
                                        </template>
                                </el-table-column>
                                <el-table-column prop="nickname" label="昵称">
                                </el-table-column>
                                <el-table-column label="性别">
                                     <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.gender == 1 ? '男' : '女' }}</span>
                                    </template>
                                </el-table-column>
                                 <el-table-column prop="register_time" label="注册时间">
                                </el-table-column>
                                 <el-table-column prop="last_login_time" label="最近登录">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="老客户" name="second">
                            <el-table :data="thmensList.oldData" border style="width: 100%;"  height="500px"  >
                                <el-table-column  label="头像">
                                       <template slot-scope="scope">
                                           <img :src="scope.row.avatar" alt="">
                                         <!-- <span style="margin-left: 10px">{{ scope.row.avatar}}</span> -->
                                        </template>
                                </el-table-column>
                                <el-table-column prop="nickname" label="昵称">
                                </el-table-column>
                                <el-table-column label="性别">
                                     <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.gender == 1 ? '男' : '女' }}</span>
                                    </template>
                                </el-table-column>
                                 <el-table-column prop="register_time" label="注册时间">
                                </el-table-column>
                                 <el-table-column prop="last_login_time" label="最近登录">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        
                    </el-tabs>
                </div>
                
                </el-drawer>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        thmensList: {
            type: Object,
            default: () => {}
        },
        contentList: {
            type: Array,
            default: () => {return []}
        }
    },
    data() {
         
        return{
            activeName: 'first',
            drawer: false,
        }
    },

    methods: {
        openClick() {
            this.drawer = true
        },
        
    }
}
</script>
<style>
.mainContent{
   
    box-sizing: border-box;
    padding: 0 20px;
    width: 100%;
    display: flex;
    justify-content:space-between;
    
}
.upList{
    width: 100%;
    height: 76px;
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid rgb(240, 240, 240) ;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}
.middleList{
    display: flex;
    flex-flow: column;
    justify-content:center;
    height: 121px;
}
.underList{
   
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
   
}
</style>